import React, { Component } from 'react'
import { Menu, Tooltip, Typography} from 'antd'
import { withRouter } from 'react-router-dom'

const SubMenu = Menu.SubMenu;
const { Paragraph } = Typography;

class TaskMenu  extends Component{
  state = {
    selectedKey: '',
    programId: 1
  }

  handleClick = (value) => {
    this.setState({
      selectedKey : value.key
    },() => {
        this.props.handleClick(parseInt(value.key))
    })
  }

  render () {
    let { topicsTasks } = this.props
    let ids = []
    topicsTasks.forEach((item, index) => {
      ids.push(index.toString())
    })
    return <div>
      <Menu
        defaultSelectedKeys={[topicsTasks[0].all[0].id.toString()]}
        defaultOpenKeys={ids}
        onClick={this.handleClick}
        style={{ width: "90%" }}
        mode='inline'>
        {
          topicsTasks.map((topicsTask, index) => {
            const tasks = topicsTask['all']
            return <SubMenu key={index} title={topicsTask.title}>
              {tasks.map((task) => {
                return <Menu.Item key={task.id}>
                  <Paragraph ellipsis>
                    <Tooltip placement='top' title={task.title}>
                      {task.title}
                    </Tooltip>
                  </Paragraph>
                </Menu.Item>
              })}
            </SubMenu>
          })
        }
      </Menu>
    </div>
  }
}

export default withRouter(TaskMenu)

